import React, { useRef, useState } from 'react'
import { connect } from 'react-redux'
import { Button } from 'antd-mobile';
import axios from 'axios'
function Index(props) {
    const [status, setStatus] = useState(0)
    const type = useRef("")
    const username = useRef("")
    const password = useRef("")
    const password1 = useRef("")
    const Tab = (num) => {
        setStatus(num)
        username.current.value = ""
        password.current.value = ""
    }
    const login = () => {
        //用户名正则，4到16位（字母，数字，下划线，减号）
        let uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
        //输出 true
        //密码强度正则，最少6位，1个小写字母，1个数字
        let pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[a-z]).*$/;
        //输出 true
        let user = username.current.value;
        let pass = password.current.value;
        if (uPattern.test(user) && pPattern.test(pass)) {
            if(status === 0){
                if (type.current.value === "成为骑手") {
                    const userInfo = {
                        role: 1,
                        username:user,
                        password:pass
                    }
                    props.login(userInfo)
                } else {
                    const userInfo = {
                        role: 0,
                        username:user,
                        password:pass
                    }
                    props.login(userInfo)
                }
            }else{
                if (type.current.value === "成为骑手") {
                    const userInfo = {
                        role: 1,
                        username:user,
                        password:pass
                    }
                    props.reigster(userInfo)
                } else {
                    const userInfo = {
                        role: 0,
                        username:user,
                        password:pass
                    }

                    if(password.current.value !== password1.current.value){
                        alert('两次密码不一致')
                    }else{
                        props.reigster(userInfo)
                    }
                }
            }
        }else if(user===""||pass===""){
            alert('用户名和密码不能为空')
        }else{
            alert('用户名和密码不符合规范')
        }
        username.current.value = ""
        password.current.value = ""
        if(password1.current.value){
            password1.current.value = ""
        }else{
            console.log('不存在')
        }
    }
    return (
        <div className="loginRegister">
            {status === 0 ? <div className="center">
                <div className="par">
                    <div className="logo"></div>
                </div>
                <div className="user-info">
                    <div className="user">
                        <select className="left" ref={type} >
                            <option>
                                普通用户
                        </option>
                            <option>
                                成为骑手
                        </option>
                        </select>
                        <div className="right">
                            <input type="text" placeholder="请输入账号" ref={username} autoFocus />
                        </div>
                    </div>
                    <div className="pass">
                        <input type="password" placeholder="请输入密码" ref={password} />
                        <span>忘记密码</span>
                    </div>
                    <div className="btn" onClick={(e) => login(e)}>
                        <Button type="primary" className="LoginBtn">登录</Button>
                    </div>
                </div>
                <div className="goRegister">
                    没有账号去<span onClick={() => Tab(1)}>注册</span>！
                 </div>
                <div className="xieyi">
                    登录即代表您已经同意<a href="#">《用户服务协议》</a><a href="#">《隐私政策》</a>
                </div>
            </div> : <div className="center">
                   <div className="par">
                        <div className="logo"></div>
                   </div>
                    <div className="user-info">
                        <div className="user">
                            <select className="left" ref={type} >
                                <option>
                                    普通用户
                        </option>
                                <option>
                                    成为骑手
                        </option>
                            </select>
                            <div className="right">
                                <input type="text" placeholder="请输入账号" ref={username} autoFocus />
                            </div>
                        </div>
                        <div className="pass">
                            <input type="password" placeholder="请输入密码" ref={password} />
                        </div>
                        <div className="pass">
                            <input type="password" placeholder="请再次输入密码" ref={password1} />
                        </div>
                        <div className="btn" onClick={(e) => login(e)}>
                            <Button type="primary" className="LoginBtn">注册</Button>
                        </div>
                    </div>
                    <div className="goRegister">
                        已有帐号去<span onClick={() => Tab(0)}>登录</span>！
                </div>
                    <div className="xieyi">
                        注册即代表您已经同意<a href="#">《用户服务协议》</a><a href="#">《隐私政策》</a>
                    </div>
                </div>}
        </div>
    )
}
const mapStateToProps = (state) => {
    return {

    }
}
const mapDispatchToProps = (dispatch,props) => {
    return {
        login(userInfo) {
            dispatch(() => {
                axios.post("/login", userInfo).then(res => {
                    if(res.data.code === 200){
                        localStorage.setItem("token",res.data.token)
                        props.history.push("/home")
                    }
                })
            })
        },
        reigster(userInfo){
            dispatch(() => {
                axios.post("/register", userInfo).then(res => {
                    alert(res.data.msg)
                })
            })
        }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Index)
